<template>
	<div>
		<ul class="nav-list">
			<li class="item" 
      v-for="item of getList" 
      :key="item"
      :ref="item"
      @touchmove="handleTouchMove"
      @touchstart="handleTouchStart"
      @touchend="handleTouchEnd"
      @click="passInfo($event)">
        {{item}}
      </li>
		</ul>
	</div>
</template>
<script>
export default {
  name: "cityNav",
  props: {
    city: Object
  },
  data () {
    return {
      touchStart: false,
      startY: 0,
      thimer: null//用于存储定时器
    }
  },
  computed: {  //将传递进来的对象的键值获取并放入数组
    getList() {
      const list = [];
      for (let key in this.city) {
        list.push(key);
      }
      return list;
    }
  },
  updated () {
    this.startY = this.$refs['A'][0].offsetTop//页面刚开始进来的时候数据为空 拿不到值，应该等页面更新渲染完毕之后
  },
  methods: {
    passInfo (e) { //向父组件传递被点击的li的内容
      this.$emit('sendInfo', e.target.innerText)
    },
    handleTouchStart () {
      this.touchStart = true
    },
    handleTouchMove (e) {
      if (this.touchStart) {
        if (this.thimer) {
          clearTimeout(this.thimer)
        }
        this.thimer = setTimeout (() => { //用于函数节流
          const touchY = e.touches[0].clientY - 80//手指触碰到的Li与a顶部的距离
          const index = Math.floor((touchY - this.startY) / 20)
       
          if (index >= 0 && index <= this.getList.length) {
          //console.log(this.getList)//计算属性的返回值是不能直接拿到的  应该使用计算属性来获取
            this.$emit('sendInfo',this.getList[index])
          }
        },20)
      }
    },
    handleTouchEnd () {
      this.touchStart = false
    }
    // handleTouchEnd
  }
};
</script>
<style scoped>
.nav-list {
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: absolute;
  top: 1.58rem;
  bottom: 0;
  right: 0;
  width: 0.4rem;
  flex-direction: column;
}
.item {
  line-height: 0.4rem;
  text-align: center;
  color: #00bcd4;
}
</style>

